<!-- 积分汇总 -->
<template>
	<view class="consumption cl_flex_page">
		<view class="search_box">
			<uni-easyinput style="width: 750rpx;" placeholder="请输入姓名或工号查询" v-model="params.nameOrCode" @clear="handleToSearch" @confirm="handleToSearch"></uni-easyinput>
		</view>
		<view class="search_box">
			<cl-date-picker v-model="params.startDate" hideBorder placeholder="开始时间" @submit="handleToSearch"
				@clear="handleToSearch"></cl-date-picker>
			<cl-date-picker v-model="params.endDate" hideBorder placeholder="结束时间" @submit="handleToSearch"
				@clear="handleToSearch"></cl-date-picker>
		</view>
		<cl-scroll-view ref="listRef" :api-fun="getList" :params="params" pageNumField="page">
			<template #list={list}>
				<view class="consumption_list_item" v-for="item in list" :key="item.id">
					<view class="consumption_list_info">
						<text class="consumption_list_item_name">{{item.shopName || '暂无店铺名'}}</text>
						<text class="consumption_list_item_type">消费用户：{{item.createdByName}}</text>
						<text class="consumption_list_item_sum">消费积分：{{item.ruleSettings}}</text>
						<text class="consumption_list_item_sum">消费状态：{{item.exchangeRecordsStats}}</text>
						<text  class="consumption_list_item_sum">记录时间：{{item.createdAtView}}</text>
					</view>
					<view class="consumption_list_item_btn" v-if="item.exchangeRecordsType === '8'" @click="handleRefund(item)">
						退<br /> 款
					</view>
				</view>
			</template>
		</cl-scroll-view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const userInfo = uni.getStorageSync('user')
	const params = ref({
		page: 1,
		size: 10,
		nameOrCode: '',
		startDate: undefined,
		endDate: undefined,
		userId: userInfo.id
	})
	const list = ref([])
	const getList = (data) => {
		console.log(data, 'datadata');
		return uni.request({
			url: '/shop/shopDetails',
			method: 'POST',
			data
		})
	}
	const listRef = ref()

	const handleRefund = (data) => {
		uni.showModal({
			title: '确认退款吗？',
			mask: true,
			success: (res) => {
				if (res.confirm) {
					uni.request({
						url: '/shop/pointsRefund',
						method: 'POST',
						data
					}).then(() => {
						uni.showToast({
							title: '退款成功！',
							icon: 'success',
							mask: true,
							duration: 500
						})
						listRef.value.refresh()
					})
				}
			}
		})
	}

	const handleToSearch = () => {
		listRef.value.refresh()
	}
</script>

<style scoped lang="scss">
	.consumption {
		&_list {
			flex: 1;
			margin: 20rpx;

			&_info {
				display: flex;
				flex-direction: column;
			}

			&_item {
				margin: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 20rpx;
				background-color: #fff;


				&_name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				&_type {
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}

				&_sum {
					font-size: 30rpx;
				}

				&_btn {
					padding: 40rpx 20rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: $uni-color-primary;
				}
			}
		}
	}

	.search_box {
		display: flex;
		flex-wrap: wrap;
	}
</style>